<%@ page session="true" isELIgnored="false" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form"
uri="http://www.springframework.org/tags/form" %>



<script type="text/javascript">
		var sellmaxvalue=100;
		var humant="unkn";
		var sellItem=[];
		var buyItem=[];
		var buyPrice=[];
		//var buyDetail=[];
		var myItem=[];
		var resType=0;
		var sellImage=[];
		var freemil=[0,0,0,0,0,0,0,0,0];
var buyIndex;
var sellmyIndex;
		 <c:forEach items="${freeResources}" var="fr">
		var i=parseInt(${fr.key});
		freemil[i]=(<c:out value="${fr.value}"/>);
		 </c:forEach>
		  
		

			function initmarket()
			{
				sellItem.push("Army");
				sellItem.push("Tank");
				sellItem.push("Aircraft");
				sellItem.push("Navy");
				sellItem.push("Spy");
				sellItem.push("Subs");
				sellItem.push("Food");
				sellItem.push("Water");
				sellItem.push("Oil");
				sellItem.push("Wood");
				sellItem.push("Silver");
				sellItem.push("Gold");

				sellImage.push("<img width=50 height=50 title='Army Available' src='images/military/army.png'>");
				sellImage.push("<img width=50 height=50 title='Tanks Available' src='images/military/tankicon.png'>");
				sellImage.push("<img width=50 height=50 title='Aircraft Available' src='images/military/airicon2.png'>");
				sellImage.push("<img width=50 height=50 title='Navy Available' src='images/military/navyicon.png'>");
				sellImage.push("<img width=50 height=50 title='Spies Available' src='images/military/spy.png'>");
				sellImage.push("<img width=50 height=50 title='Submarines Available' src='images/military/subicon.png'>");
				

			}


			function createSellScreen()
			{

				$('#slider').slider({
					value:10,
			min: 0,
			max: sellmaxvalue,
			animate: true,
			slide: function(event, ui) {
				$("#sellamount").html(humant +': ' + ui.value + " / Free: " + (sellmaxvalue-ui.value));
			}			
				});
				


				$('#pslider').slider({
				value:15,
		min: 1,
		max: 1000,
		animate: true,
		slide: function(event, ui) {
			$("#priceamount").html('Sell Price: $' + ui.value );
		}			
			});
				
				for(var x=0;x<6;x++)
				{
				var sellstr= "" + sellItem[x] + " <br>  " + sellImage[x];
				$("#carousel").append("<li class='item'>"+  sellstr  +" </li>");
				}

				for(var x=0;x<6;x++)
				{
				var sellstr= "" + sellItem[x+6] + " <br>  " + costhumb[x];
				$("#carousel").append("<li class='item'>"+  sellstr  +" </li>");
				}

						

				$('#sellbutton').bind('click', function(event) {
					var resAmount=$("#slider" ).slider("value");
					var resPrice=$("#pslider" ).slider("value");
					if(resAmount<1)
					{
						jAlert("You need to select the amount of " + humant + " to sell","Nothing selected!");
						return;
					}
					showMiniLoading();
				$.get("addsales/add", {
					saleType : resType,
					saleNum : resAmount,
					salePrice : resPrice
				}, function(rtnmsg) {
					hideMiniLoading();
					if(null==rtnmsg)
					{
						noKonnect();
								return;
					}
					if(rtnmsg["status"]!="+OK")
					{
					jAlert("Your sale was refused! " + rtnmsg["code"],"Sale refused");
					return;
					}
					jAlert("Added your Item for sale!. Best of Luck","Item on sale");
					$("#sellbutton").button("disable");
					//FIXME also update the resources and military resources!
					if(resType<6)
					{
					//	mresources[resType]-=resAmount;
						//freemil[resType]-=resAmount;
						// Better to do it on server since we might have unflushed changes on the client
						syncMilServer();
						//syncMilControls() ;
					}
					else
					{
						//resources[resType-6][1]-=resAmount;
						syncServer();
						//syncResData();
					}
				});

				});
			}
			
			
	

			function updateInformation(idx)
			{
				if(idx>=0 && idx<=5)
				{
	 			sellmaxvalue= freemil[idx];
				}
				else if(idx>=6 && idx<=12)
					{
				sellmaxvalue=resources[idx-6][1];
				}
				else
				{
				$("#sellamount").html("Click on the Item you wish you sell");
				$("#sellbutton").button("disable");
				return;
				}
				$("#sellbutton").button("enable");
			resType=idx;
			humant=sellItem[idx];
 			$("#slider" ).slider( "option", "max", sellmaxvalue );
	 		$("#slider" ).slider("value", 0 );
	 		//$("#pslider" ).slider("value", 1 );
	 		$("#sellamount").html("Select the amount of " + humant + " you wish to sell (0/" + sellmaxvalue + ")" );
	 		//$("#priceamount").html("$1" );
			}

function refreshBuyScreen()
{
//load all elements from the memory back to the carousel
	
}
			
			function createBuyScreen()
			{
				buyItem=[];
				buyPrice=[];
			//	buyDetail=[];
				$.get("getallsales/getall", {
					
				}, function(rtnmsg) {
					if(null==rtnmsg)
					{
						noKonnect();
								return;
					}

					for ( var prop in rtnmsg) {
						buyItem.push(""+prop);
						var itemd=rtnmsg[prop].split("/");
						var itemType=itemd[0];
						buyPrice.push(""+itemd[2]);
						var imgurl="";
					if(itemType<6)
					{
						imgurl=sellImage[itemType];
					}
					else if(itemType<12)
					{
						imgurl=costhumb[itemType-6];
					}
						
					var buystr= "Seller:<img src='https://graph.facebook.com/"+ itemd[3] +"/picture?type=square'><br/> <span class='amount'>"+itemd[1] +"</span>"+ imgurl  + "<div class='price'>$" +  itemd[2] + "</div> ";
				//	buyDetail.push(buystr);
					buycarousel.addItem(buystr);
					}

				
					
				});
				
			}
			function bindBuyButton(){

				$('#buybutton').bind('click', function(event) {
					if(buyPrice[buyIndex] > resources[6][1])
					{
					jAlert("You have insufficient money to buy this item!","Not enough money!");
					return;
					}

					showMiniLoading();
					$.get("buysales/buy", {
						saleid:buyItem[buyIndex]
					}, function(rtnmsg) {
							
						hideMiniLoading();
					if(null==rtnmsg)
					{
						noKonnect();
								return;
					}
					
					$("#buybutton").button("disable");
										
		var resType=rtnmsg["saletype"];
var resPrice=rtnmsg["saleprice"];
var resAmount=rtnmsg["saleamount"];

if(rtnmsg["status"]=="+OK")
{
	jAlert("You have successfully bought this item","Item bought");
}
else
{
	var cod=rtnmsg["code"];
	if(cod=="EDE")
	{
		jAlert("Someone else bought this item before you could! " ,"Item not available");
	}
	else
	{
jAlert("Could not buy this item. Unknown error " + cod,"Could not buy");
	}
	buyItem.splice(buyIndex, 1);
	buyPrice.splice(buyIndex, 1);
	buycarousel.removeItem(buyIndex);

return;
}


					if(resType<6)
					{
						mresources[resType]=parseInt(mresources[resType])+parseInt(resAmount);
						freemil[resType]=parseInt(freemil[resType])+parseInt(resAmount);
						syncMilControls() ;
						//	syncMilServer();

					}
					else if(resType<12)
					{
					resources[resType-6][1]=parseInt(resources[resType-6][1])+parseInt(resAmount);
					//syncServer(true); We dont need to sync server. the GUI does a good job of keeping the right score.
					}
					resources[6][1]= parseInt(resources[6][1])-buyPrice[buyIndex]
					syncResData();
					
					buyItem.splice(buyIndex, 1);
					buyPrice.splice(buyIndex, 1);
					buycarousel.removeItem(buyIndex);					
				
						});

				});
				
			}

	
			


			var carousel;
			var buycarousel;
		
	    (function () {
						initmarket();
						createSellScreen();
						 buildCarousel();

			$(".xbutton").button({ disabled: true });
			$('#markettabs').tabs();
			    })();
		
		function buildCarousel()
		{
		 carousel    = new YAHOO.widget.Carousel("container", {
	                            numVisible: [2,6] ,isVertical:true
	                    });
	                            
	       carousel.render(); 
	       carousel.show(); 
		
					 carousel.on("itemSelected", function (index) { 
					 updateInformation(index)
					 });
carousel.set("selectedItem", 0);
carousel.addListener("show", $("#container").width("100%"));					 

			buycarousel    = new YAHOO.widget.Carousel("buycontainer", {
				 numVisible: [3,2] ,isVertical:false
                 });
                         
			buycarousel.render(); 
			buycarousel.show(); 
			buycarousel.set("selectedItem", 0);
			buycarousel.on("itemSelected", function (index) { 
				// updateInformation(index)
				buyIndex=index;
				$("#buybutton").button("enable");
				 });
			createBuyScreen();
			bindBuyButton();
					 
					}
	
</script>
<style type="text/css">
#markettabs {
	font: "Trebuchet MS", sans-serifp;
	margin: 0px;
	padding:0px;
	height: 95%
}

.xbutton {
	width: 150px;
	height: 50px
}

.yui-carousel-element li {
	height: 70px;
	text-align: left;
	cursor: pointer;
	width: 70px;
	-moz-border-radius: 5px 5px 5px 5px;
	-moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-border-radius: 5px 5px 5px 5px;
	-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	border: medium none;
}


#buycarousel li {
	height: 120px;
	text-align: left;
	cursor: pointer;
	width: 160px;
	-moz-border-radius: 20px 20px 20px 20px;
	-moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 20px 20px 20px 20px;
	-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	border: medium none;
	color: rgb(66,44,7);
	font-size: 1.4em;
	font-weight: bold;
	outline: 0 none;
	padding: 10px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}




.yui-carousel-item-selected {
	background-color: orange;
}

#container .yui-carousel-nav {
	display: none;
}



#slider
{
 height:2em
}

#slider .ui-slider-handle
{
height:2.2em;
width:3em;
}

#pslider .ui-slider-handle
{
height:2.2em;
width:3em;
}

#pslider
{ height:2em
}





</style>

<div id="markettabs">
<ul>

	<li><a href="#sell">Sell</a></li>

	<li><a href="#buy">Buy</a></li>

</ul>

<div id="sell">

<table>
	<tr>
		<td width="25%" valign="top">
		<div id="container" class="yui-skin-sam" style="width:100%">
		<ol id="carousel">


		</ol>
		</div>

		</td>
		<td width="75%" valign="top" style="padding:10px">
		
		<br>

		<br>
		<br>
		Amount:
		<div id="slider"></div>
		<div id="sellamount"></div>
		<br>

		Price:
		<div id="pslider"></div>
		<div id="priceamount">Sell Price: $1</div>
		<br>
		<hr>
		<button class="xbutton" id="sellbutton">Sell</button>

		</td>
	</tr>
</table>


</div>
<div id="buy">

<div id="buycontainer" class="yui-skin-sam">
<ol id="buycarousel">


</ol>
</div>

<button class="xbutton" id="buybutton">Buy</button>
</div>

<!-- >div id="mysales" style="height: 500px">
<ol id="mselectable" class="selectable">
</ol>
<hr>
<button class="xbutton" id="deletebutton">Remove Listing</button>
</div--></div>





